﻿
@{
    ViewData["Title"] = "FormAdvance";
}

<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Basic Form Inputs</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Form Components</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Basic Form Inputs</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="alert alert-primary" role="alert">
                                    <p>Use our extra helper file for quick setup Form Components in your page - <a href="index-form-package.html" target="_blank" class="alert-link">CHECKOUT</a></p>
                                    <label class="text-muted">Copy/paste source code in your page in just couples of seconds.</label>
                                </div>
                            </div>
                            <!-- [ Switches ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Switches</h5>
                                        <span class="d-block m-t-5">Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-xl-3 col-md-6 mb-4">
                                                <h5>Default Switch</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="switch d-inline m-r-10">
                                                        <input type="checkbox" id="switch-1" checked>
                                                        <label for="switch-1" class="cr"></label>
                                                    </div>
                                                    <label>Checked</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch d-inline m-r-10">
                                                        <input type="checkbox" id="switch-2">
                                                        <label for="switch-2" class="cr"></label>
                                                    </div>
                                                    <label>Uncheck</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch d-inline m-r-10">
                                                        <input type="checkbox" id="switch-3" disabled>
                                                        <label for="switch-3" class="cr"></label>
                                                    </div>
                                                    <label>Disabled</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch d-inline m-r-10">
                                                        <input type="checkbox" id="switch-4" disabled checked>
                                                        <label for="switch-4" class="cr"></label>
                                                    </div>
                                                    <label>Disabled Checked</label>
                                                </div>
                                            </div>
                                            <div class="col-xl-3 col-md-6 mb-4">
                                                <h5>Alternative Switch</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="switch switch-alternative d-inline m-r-10">
                                                        <input type="checkbox" id="switch-a-1" checked>
                                                        <label for="switch-a-1" class="cr"></label>
                                                    </div>
                                                    <label>Checked</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-alternative d-inline m-r-10">
                                                        <input type="checkbox" id="switch-a-2">
                                                        <label for="switch-a-2" class="cr"></label>
                                                    </div>
                                                    <label>Uncheck</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-alternative d-inline m-r-10">
                                                        <input type="checkbox" id="switch-a-3" disabled>
                                                        <label for="switch-a-3" class="cr"></label>
                                                    </div>
                                                    <label>Disabled</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-alternative d-inline m-r-10">
                                                        <input type="checkbox" id="switch-a-4" disabled checked>
                                                        <label for="switch-a-4" class="cr"></label>
                                                    </div>
                                                    <label>Disabled Checked</label>
                                                </div>
                                            </div>
                                            <div class="col-xl-3 col-md-6 mb-4">
                                                <h5>Primary Switch</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="switch switch-primary d-inline m-r-10">
                                                        <input type="checkbox" id="switch-p-1" checked>
                                                        <label for="switch-p-1" class="cr"></label>
                                                    </div>
                                                    <label>Checked</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-primary d-inline m-r-10">
                                                        <input type="checkbox" id="switch-p-2">
                                                        <label for="switch-p-2" class="cr"></label>
                                                    </div>
                                                    <label>Uncheck</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-primary d-inline m-r-10">
                                                        <input type="checkbox" id="switch-p-3" disabled>
                                                        <label for="switch-p-3" class="cr"></label>
                                                    </div>
                                                    <label>Disabled</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-primary d-inline m-r-10">
                                                        <input type="checkbox" id="switch-p-4" disabled checked>
                                                        <label for="switch-p-4" class="cr"></label>
                                                    </div>
                                                    <label>Disabled Checked</label>
                                                </div>
                                            </div>
                                            <div class="col-xl-3 col-md-6 mb-4">
                                                <h5>Danger Switch</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="switch switch-danger d-inline m-r-10">
                                                        <input type="checkbox" id="switch-d-1" checked>
                                                        <label for="switch-d-1" class="cr"></label>
                                                    </div>
                                                    <label>Checked</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-danger d-inline m-r-10">
                                                        <input type="checkbox" id="switch-d-2">
                                                        <label for="switch-d-2" class="cr"></label>
                                                    </div>
                                                    <label>Uncheck</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-danger d-inline m-r-10">
                                                        <input type="checkbox" id="switch-d-3" disabled>
                                                        <label for="switch-d-3" class="cr"></label>
                                                    </div>
                                                    <label>Disabled</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-danger d-inline m-r-10">
                                                        <input type="checkbox" id="switch-d-4" disabled checked>
                                                        <label for="switch-d-4" class="cr"></label>
                                                    </div>
                                                    <label>Disabled Checked</label>
                                                </div>
                                            </div>
                                            <div class="col-xl-3 col-md-6 mb-4">
                                                <h5>Success Switch</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="switch switch-success d-inline m-r-10">
                                                        <input type="checkbox" id="switch-s-1" checked>
                                                        <label for="switch-s-1" class="cr"></label>
                                                    </div>
                                                    <label>Checked</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-success d-inline m-r-10">
                                                        <input type="checkbox" id="switch-s-2">
                                                        <label for="switch-s-2" class="cr"></label>
                                                    </div>
                                                    <label>Uncheck</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-success d-inline m-r-10">
                                                        <input type="checkbox" id="switch-s-3" disabled>
                                                        <label for="switch-s-3" class="cr"></label>
                                                    </div>
                                                    <label>Disabled</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-success d-inline m-r-10">
                                                        <input type="checkbox" id="switch-s-4" disabled checked>
                                                        <label for="switch-s-4" class="cr"></label>
                                                    </div>
                                                    <label>Disabled Checked</label>
                                                </div>
                                            </div>
                                            <div class="col-xl-3 col-md-6 mb-3">
                                                <h5>Warning Switch</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="switch switch-warning d-inline m-r-10">
                                                        <input type="checkbox" id="switch-w-1" checked>
                                                        <label for="switch-w-1" class="cr"></label>
                                                    </div>
                                                    <label>Checked</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-warning d-inline m-r-10">
                                                        <input type="checkbox" id="switch-w-2">
                                                        <label for="switch-w-2" class="cr"></label>
                                                    </div>
                                                    <label>Uncheck</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-warning d-inline m-r-10">
                                                        <input type="checkbox" id="switch-w-3" disabled>
                                                        <label for="switch-w-3" class="cr"></label>
                                                    </div>
                                                    <label>Disabled</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-warning d-inline m-r-10">
                                                        <input type="checkbox" id="switch-w-4" disabled checked>
                                                        <label for="switch-w-4" class="cr"></label>
                                                    </div>
                                                    <label>Disabled Checked</label>
                                                </div>
                                            </div>
                                            <div class="col-xl-3 col-md-6 mb-3">
                                                <h5>Info Switch</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="switch switch-info d-inline m-r-10">
                                                        <input type="checkbox" id="switch-i-1" checked>
                                                        <label for="switch-i-1" class="cr"></label>
                                                    </div>
                                                    <label>Checked</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-info d-inline m-r-10">
                                                        <input type="checkbox" id="switch-i-2">
                                                        <label for="switch-i-2" class="cr"></label>
                                                    </div>
                                                    <label>Uncheck</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-info d-inline m-r-10">
                                                        <input type="checkbox" id="switch-i-3" disabled>
                                                        <label for="switch-i-3" class="cr"></label>
                                                    </div>
                                                    <label>Disabled</label>
                                                </div>
                                                <div class="form-group">
                                                    <div class="switch switch-info d-inline m-r-10">
                                                        <input type="checkbox" id="switch-i-4" disabled checked>
                                                        <label for="switch-i-4" class="cr"></label>
                                                    </div>
                                                    <label>Disabled Checked</label>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Switches ] end -->
                            <!-- [ Radiobox ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Radio</h5>
                                        <span class="d-block m-t-5">Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <!-- [ default radio ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Default Radio</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio d-inline">
                                                        <input type="radio" name="radio-1" id="radio-1" checked>
                                                        <label for="radio-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio d-inline">
                                                        <input type="radio" name="radio-1" id="radio-2">
                                                        <label for="radio-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio d-inline m-r-10">
                                                        <input type="radio" id="radio-3" disabled>
                                                        <label for="radio-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio d-inline m-r-10">
                                                        <input type="radio" id="radio-4" disabled checked>
                                                        <label for="radio-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Radio Fill Button</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-fill d-inline">
                                                        <input type="radio" name="radio-fill-1" id="radio-fill-1" checked>
                                                        <label for="radio-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-fill d-inline">
                                                        <input type="radio" name="radio-fill-1" id="radio-fill-2">
                                                        <label for="radio-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-fill d-inline m-r-10">
                                                        <input type="radio" name="radio-fill-3" id="radio-fill-3" disabled>
                                                        <label for="radio-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-fill d-inline m-r-10">
                                                        <input type="radio" id="radio-fill-4" disabled checked>
                                                        <label for="radio-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline Button</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio d-inline">
                                                        <input type="radio" name="radio-in-1" id="radio-in-1" checked>
                                                        <label for="radio-in-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio d-inline">
                                                        <input type="radio" name="radio-in-1" id="radio-in-2">
                                                        <label for="radio-in-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline fill Button</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-fill d-inline">
                                                        <input type="radio" name="radio-in-2" id="radio-infill-1" checked>
                                                        <label for="radio-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-fill d-inline">
                                                        <input type="radio" name="radio-in-2" id="radio-infill-2">
                                                        <label for="radio-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ default radio ] end -->
                                            <!-- [ primary radio ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Primary Radio</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-primary d-inline">
                                                        <input type="radio" name="radio-p-1" id="radio-p-1" checked>
                                                        <label for="radio-p-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-primary d-inline">
                                                        <input type="radio" name="radio-p-1" id="radio-p-2">
                                                        <label for="radio-p-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-primary d-inline m-r-10">
                                                        <input type="radio" id="radio-p-3" disabled>
                                                        <label for="radio-p-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-primary d-inline m-r-10">
                                                        <input type="radio" id="radio-p-4" disabled checked>
                                                        <label for="radio-p-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Radio fill Button</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-primary radio-fill d-inline">
                                                        <input type="radio" name="radio-p-fill-1" id="radio-p-fill-1" checked>
                                                        <label for="radio-p-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-primary radio-fill d-inline">
                                                        <input type="radio" name="radio-p-fill-1" id="radio-p-fill-2">
                                                        <label for="radio-p-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-primary radio-fill d-inline m-r-10">
                                                        <input type="radio" name="radio-p-fill-3" id="radio-p-fill-3" disabled>
                                                        <label for="radio-p-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-primary radio-fill d-inline m-r-10">
                                                        <input type="radio" id="radio-p-fill-4" disabled checked>
                                                        <label for="radio-p-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline Button</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-primary d-inline">
                                                        <input type="radio" name="radio-p-fill-5" id="radio-p-fill-5" checked>
                                                        <label for="radio-p-fill-5" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-primary d-inline">
                                                        <input type="radio" name="radio-p-fill-5" id="radio-p-fill-6">
                                                        <label for="radio-p-fill-6" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline fill Button</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-primary radio-fill d-inline">
                                                        <input type="radio" name="radio-p-in-1" id="radio-p-infill-1" checked>
                                                        <label for="radio-p-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-primary radio-fill d-inline">
                                                        <input type="radio" name="radio-p-in-1" id="radio-p-infill-2">
                                                        <label for="radio-p-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ primary radio ] end -->
                                            <!-- [ Danger radio ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Danger Radio</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-danger d-inline">
                                                        <input type="radio" name="radio-d-1" id="radio-d-1" checked>
                                                        <label for="radio-d-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-danger d-inline">
                                                        <input type="radio" name="radio-d-1" id="radio-d-2">
                                                        <label for="radio-d-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-danger d-inline m-r-10">
                                                        <input type="radio" id="radio-d-3" disabled>
                                                        <label for="radio-d-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-danger d-inline m-r-10">
                                                        <input type="radio" id="radio-d-4" disabled checked>
                                                        <label for="radio-d-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Radio fill Button</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-danger radio-fill d-inline">
                                                        <input type="radio" name="radio-d-fill-1" id="radio-d-fill-1" checked>
                                                        <label for="radio-d-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-danger radio-fill d-inline">
                                                        <input type="radio" name="radio-d-fill-1" id="radio-d-fill-2">
                                                        <label for="radio-d-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-danger radio-fill d-inline m-r-10">
                                                        <input type="radio" name="radio-d-fill-3" id="radio-d-fill-3" disabled>
                                                        <label for="radio-d-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-danger radio-fill d-inline m-r-10">
                                                        <input type="radio" id="radio-d-fill-4" disabled checked>
                                                        <label for="radio-d-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline Button</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-danger d-inline">
                                                        <input type="radio" name="radio-d-fill-5" id="radio-d-fill-5" checked>
                                                        <label for="radio-d-fill-5" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-danger d-inline">
                                                        <input type="radio" name="radio-d-fill-5" id="radio-d-fill-6">
                                                        <label for="radio-d-fill-6" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline fill Button</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-danger radio-fill d-inline">
                                                        <input type="radio" name="radio-d-in-1" id="radio-d-infill-1" checked>
                                                        <label for="radio-d-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-danger radio-fill d-inline">
                                                        <input type="radio" name="radio-d-in-1" id="radio-d-infill-2">
                                                        <label for="radio-d-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ Danger radio ] end -->
                                            <!-- [ success radio ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Success Radio</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-success d-inline">
                                                        <input type="radio" name="radio-s-1" id="radio-s-1" checked>
                                                        <label for="radio-s-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-success d-inline">
                                                        <input type="radio" name="radio-s-1" id="radio-s-2">
                                                        <label for="radio-s-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-success d-inline m-r-10">
                                                        <input type="radio" id="radio-s-3" disabled>
                                                        <label for="radio-s-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-success d-inline m-r-10">
                                                        <input type="radio" id="radio-s-4" disabled checked>
                                                        <label for="radio-s-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Radio fill</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-success radio-fill d-inline">
                                                        <input type="radio" name="radio-s-fill-1" id="radio-s-fill-1" checked>
                                                        <label for="radio-s-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-success radio-fill d-inline">
                                                        <input type="radio" name="radio-s-fill-1" id="radio-s-fill-2">
                                                        <label for="radio-s-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-success radio-fill d-inline m-r-10">
                                                        <input type="radio" name="radio-s-fill-3" id="radio-s-fill-3" disabled>
                                                        <label for="radio-s-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-success radio-fill d-inline m-r-10">
                                                        <input type="radio" id="radio-s-fill-4" disabled checked>
                                                        <label for="radio-s-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-success d-inline">
                                                        <input type="radio" name="radio-s-in-1" id="radio-s-in-1" checked>
                                                        <label for="radio-s-in-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-success d-inline">
                                                        <input type="radio" name="radio-s-in-1" id="radio-s-in-2">
                                                        <label for="radio-s-in-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline fill</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-success radio-fill d-inline">
                                                        <input type="radio" name="radio-s-in-3" id="radio-s-infill-3" checked>
                                                        <label for="radio-s-infill-3" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-success radio-fill d-inline">
                                                        <input type="radio" name="radio-s-in-3" id="radio-s-infill-2">
                                                        <label for="radio-s-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ success radio ] end -->
                                            <!-- [ warning radio ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Warning Radio</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-warning d-inline">
                                                        <input type="radio" name="radio-w-1" id="radio-w-1" checked>
                                                        <label for="radio-w-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-warning d-inline">
                                                        <input type="radio" name="radio-w-1" id="radio-w-2">
                                                        <label for="radio-w-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-warning d-inline m-r-10">
                                                        <input type="radio" id="radio-w-3" disabled>
                                                        <label for="radio-w-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-warning d-inline m-r-10">
                                                        <input type="radio" id="radio-w-4" disabled checked>
                                                        <label for="radio-w-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Radio fill</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-warning radio-fill d-inline">
                                                        <input type="radio" name="radio-w-fill-1" id="radio-w-fill-1" checked>
                                                        <label for="radio-w-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-warning radio-fill d-inline">
                                                        <input type="radio" name="radio-w-fill-1" id="radio-w-fill-2">
                                                        <label for="radio-w-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-warning radio-fill d-inline m-r-10">
                                                        <input type="radio" name="radio-w-fill-3" id="radio-w-fill-3" disabled>
                                                        <label for="radio-w-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-warning radio-fill d-inline m-r-10">
                                                        <input type="radio" id="radio-w-fill-4" disabled checked>
                                                        <label for="radio-w-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-warning d-inline">
                                                        <input type="radio" name="radio-w-in-1" id="radio-w-in-1" checked>
                                                        <label for="radio-w-in-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-warning d-inline">
                                                        <input type="radio" name="radio-w-in-1" id="radio-w-in-2">
                                                        <label for="radio-w-in-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline fill</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-warning radio-fill d-inline">
                                                        <input type="radio" name="radio-w-in-3" id="radio-w-infill-1" checked>
                                                        <label for="radio-w-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-warning radio-fill d-inline">
                                                        <input type="radio" name="radio-w-in-3" id="radio-w-infill-2">
                                                        <label for="radio-w-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ warning radio ] end -->
                                            <!-- [ Info radio ] start -->
                                            <div class="col-xl-4 col-md-6 mb-3">
                                                <h5>Info Radio</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-info d-inline">
                                                        <input type="radio" name="radio-i-1" id="radio-i-1" checked>
                                                        <label for="radio-i-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-info d-inline">
                                                        <input type="radio" name="radio-i-1" id="radio-i-2">
                                                        <label for="radio-i-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-info d-inline m-r-10">
                                                        <input type="radio" id="radio-i-3" disabled>
                                                        <label for="radio-i-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-info d-inline m-r-10">
                                                        <input type="radio" id="radio-i-4" disabled checked>
                                                        <label for="radio-i-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Radio fill</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="radio radio-info radio-fill d-inline">
                                                        <input type="radio" name="radio-i-fill-1" id="radio-i-fill-1" checked>
                                                        <label for="radio-i-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-info radio-fill d-inline">
                                                        <input type="radio" name="radio-i-fill-1" id="radio-i-fill-2">
                                                        <label for="radio-i-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-info radio-fill d-inline m-r-10">
                                                        <input type="radio" name="radio-i-fill-3" id="radio-i-fill-3" disabled>
                                                        <label for="radio-i-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="radio radio-info radio-fill d-inline m-r-10">
                                                        <input type="radio" id="radio-i-fill-4" disabled checked>
                                                        <label for="radio-i-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-info d-inline">
                                                        <input type="radio" name="radio-i-in-1" id="radio-i-in-1" checked>
                                                        <label for="radio-i-in-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-info d-inline">
                                                        <input type="radio" name="radio-i-in-1" id="radio-i-in-2">
                                                        <label for="radio-i-in-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline fill</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-info radio-fill d-inline">
                                                        <input type="radio" name="radio-i-in-2" id="radio-i-infill-1" checked>
                                                        <label for="radio-i-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="radio radio-info radio-fill d-inline">
                                                        <input type="radio" name="radio-i-in-2" id="radio-i-infill-2">
                                                        <label for="radio-i-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ Info radio ] end -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Radiobox ] end -->
                            <!-- [ checkbox ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Checkbox</h5>
                                        <span class="d-block m-t-5">Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <!-- [ default-checkbox ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Default checkbox</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox d-inline">
                                                        <input type="checkbox" name="checkbox-1" id="checkbox-1" checked>
                                                        <label for="checkbox-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox d-inline">
                                                        <input type="checkbox" name="checkbox-1" id="checkbox-2">
                                                        <label for="checkbox-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-3" disabled>
                                                        <label for="checkbox-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-4" disabled checked>
                                                        <label for="checkbox-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-1" checked>
                                                        <label for="checkbox-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-2">
                                                        <label for="checkbox-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" name="checkbox-fill-3" id="checkbox-fill-3" disabled>
                                                        <label for="checkbox-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-fill-4" disabled checked>
                                                        <label for="checkbox-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline checkbox </h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox d-inline">
                                                        <input type="checkbox" name="checkbox-in-1" id="checkbox-in-1" checked>
                                                        <label for="checkbox-in-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox d-inline">
                                                        <input type="checkbox" name="checkbox-in-1" id="checkbox-in-2">
                                                        <label for="checkbox-in-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-in-3" id="checkbox-infill-1" checked>
                                                        <label for="checkbox-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-in-3" id="checkbox-infill-2">
                                                        <label for="checkbox-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ default-checkbox ] end -->
                                            <!-- [ primary-checkbox ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Primary checkbox</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-primary d-inline">
                                                        <input type="checkbox" name="checkbox-p-1" id="checkbox-p-1" checked>
                                                        <label for="checkbox-p-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-primary d-inline">
                                                        <input type="checkbox" name="checkbox-p-1" id="checkbox-p-2">
                                                        <label for="checkbox-p-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-primary d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-p-3" disabled>
                                                        <label for="checkbox-p-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-primary d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-p-4" disabled checked>
                                                        <label for="checkbox-p-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-primary checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-p-fill-1" id="checkbox-p-fill-1" checked>
                                                        <label for="checkbox-p-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-primary checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-fill-p-1" id="checkbox-p-fill-2">
                                                        <label for="checkbox-p-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-primary checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" name="checkbox-p-fill-3" id="checkbox-p-fill-3" disabled>
                                                        <label for="checkbox-p-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-primary checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-p-fill-4" disabled checked>
                                                        <label for="checkbox-p-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-primary d-inline">
                                                        <input type="checkbox" name="checkbox-p-in-1" id="checkbox-p-in-1" checked>
                                                        <label for="checkbox-p-in-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-primary d-inline">
                                                        <input type="checkbox" name="checkbox-in-1" id="checkbox-p-in-2">
                                                        <label for="checkbox-p-in-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-primary checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-p-in-1" id="checkbox-p-infill-1" checked>
                                                        <label for="checkbox-p-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-primary checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-p-in-1" id="checkbox-p-infill-2">
                                                        <label for="checkbox-p-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ primary-checkbox ] end -->
                                            <!-- [ Danger-checkbox ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Danger checkbox</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-danger d-inline">
                                                        <input type="checkbox" name="checkbox-d-1" id="checkbox-d-1" checked>
                                                        <label for="checkbox-d-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-danger d-inline">
                                                        <input type="checkbox" name="checkbox-d-1" id="checkbox-d-2">
                                                        <label for="checkbox-d-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-danger d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-d-3" disabled>
                                                        <label for="checkbox-d-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-danger d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-d-4" disabled checked>
                                                        <label for="checkbox-d-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-danger checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-d-fill-1" id="checkbox-d-fill-1" checked>
                                                        <label for="checkbox-d-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-danger checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-fill-d-1" id="checkbox-d-fill-2">
                                                        <label for="checkbox-d-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-danger checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" name="checkbox-d-fill-3" id="checkbox-d-fill-3" disabled>
                                                        <label for="checkbox-d-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-danger checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-d-fill-4" disabled checked>
                                                        <label for="checkbox-d-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-danger d-inline">
                                                        <input type="checkbox" name="checkbox-d-in-1" id="checkbox-d-in-1" checked>
                                                        <label for="checkbox-d-in-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-danger d-inline">
                                                        <input type="checkbox" name="checkbox-in-1" id="checkbox-d-in-2">
                                                        <label for="checkbox-d-in-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-danger checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-d-in-1" id="checkbox-d-infill-1" checked>
                                                        <label for="checkbox-d-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-danger checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-d-in-1" id="checkbox-d-infill-2">
                                                        <label for="checkbox-d-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ Danger-checkbox ] end -->
                                            <!-- [ success-checkbox ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Success checkbox</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-success d-inline">
                                                        <input type="checkbox" name="checkbox-s-1" id="checkbox-s-1" checked>
                                                        <label for="checkbox-s-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-success d-inline">
                                                        <input type="checkbox" name="checkbox-s-1" id="checkbox-s-2">
                                                        <label for="checkbox-s-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-success d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-s-3" disabled>
                                                        <label for="checkbox-s-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-success d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-s-4" disabled checked>
                                                        <label for="checkbox-s-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-success checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-s-fill-1" id="checkbox-s-fill-1" checked>
                                                        <label for="checkbox-s-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-success checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-fill-s-1" id="checkbox-s-fill-2">
                                                        <label for="checkbox-s-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-success checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" name="checkbox-s-fill-3" id="checkbox-s-fill-3" disabled>
                                                        <label for="checkbox-s-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-success checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-s-fill-4" disabled checked>
                                                        <label for="checkbox-s-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-success d-inline">
                                                        <input type="checkbox" name="checkbox-s-in-1" id="checkbox-s-in-1" checked>
                                                        <label for="checkbox-s-in-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-success d-inline">
                                                        <input type="checkbox" name="checkbox-in-1" id="checkbox-s-in-2">
                                                        <label for="checkbox-s-in-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-success checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-s-in-1" id="checkbox-s-infill-1" checked>
                                                        <label for="checkbox-s-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-success checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-s-in-1" id="checkbox-s-infill-2">
                                                        <label for="checkbox-s-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ success-checkbox ] end -->
                                            <!-- [ warning-checkbox ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Warning checkbox</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-warning d-inline">
                                                        <input type="checkbox" name="checkbox-w-1" id="checkbox-w-1" checked>
                                                        <label for="checkbox-w-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-warning d-inline">
                                                        <input type="checkbox" name="checkbox-w-1" id="checkbox-w-2">
                                                        <label for="checkbox-w-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-warning d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-w-3" disabled>
                                                        <label for="checkbox-w-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-warning d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-w-4" disabled checked>
                                                        <label for="checkbox-w-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-warning checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-w-fill-1" id="checkbox-w-fill-1" checked>
                                                        <label for="checkbox-w-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-warning checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-fill-w-1" id="checkbox-w-fill-2">
                                                        <label for="checkbox-w-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-warning checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" name="checkbox-w-fill-3" id="checkbox-w-fill-3" disabled>
                                                        <label for="checkbox-w-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-warning checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-w-fill-4" disabled checked>
                                                        <label for="checkbox-w-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-warning d-inline">
                                                        <input type="checkbox" name="checkbox-w-in-1" id="checkbox-w-in-1" checked>
                                                        <label for="checkbox-w-in-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-warning d-inline">
                                                        <input type="checkbox" name="checkbox-in-1" id="checkbox-w-in-2">
                                                        <label for="checkbox-w-in-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-warning checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-w-in-1" id="checkbox-w-infill-1" checked>
                                                        <label for="checkbox-w-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-warning checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-w-in-1" id="checkbox-w-infill-2">
                                                        <label for="checkbox-w-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ warning-checkbox ] end -->
                                            <!-- [ Info-checkbox ] start -->
                                            <div class="col-xl-4 col-md-6 mb-5">
                                                <h5>Info checkbox</h5>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-info d-inline">
                                                        <input type="checkbox" name="checkbox-i-1" id="checkbox-i-1" checked>
                                                        <label for="checkbox-i-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-info d-inline">
                                                        <input type="checkbox" name="checkbox-i-1" id="checkbox-i-2">
                                                        <label for="checkbox-i-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-info d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-i-3" disabled>
                                                        <label for="checkbox-i-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-info d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-i-4" disabled checked>
                                                        <label for="checkbox-i-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-info checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-i-fill-1" id="checkbox-i-fill-1" checked>
                                                        <label for="checkbox-i-fill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-info checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-fill-i-1" id="checkbox-i-fill-2">
                                                        <label for="checkbox-i-fill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-info checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" name="checkbox-i-fill-3" id="checkbox-i-fill-3" disabled>
                                                        <label for="checkbox-i-fill-3" class="cr">Disabled</label>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="checkbox checkbox-info checkbox-fill d-inline m-r-10">
                                                        <input type="checkbox" id="checkbox-i-fill-4" disabled checked>
                                                        <label for="checkbox-i-fill-4" class="cr">Disabled Checked</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Inline checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-info d-inline">
                                                        <input type="checkbox" name="checkbox-i-in-1" id="checkbox-i-in-1" checked>
                                                        <label for="checkbox-i-in-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-info d-inline">
                                                        <input type="checkbox" name="checkbox-in-1" id="checkbox-i-in-2">
                                                        <label for="checkbox-i-in-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                                <h6 class="mt-4">Bordered checkbox</h6>
                                                <hr>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-info checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-i-in-1" id="checkbox-i-infill-1" checked>
                                                        <label for="checkbox-i-infill-1" class="cr">Checked</label>
                                                    </div>
                                                </div>
                                                <div class="form-group d-inline">
                                                    <div class="checkbox checkbox-info checkbox-fill d-inline">
                                                        <input type="checkbox" name="checkbox-i-in-1" id="checkbox-i-infill-2">
                                                        <label for="checkbox-i-infill-2" class="cr">Uncheck</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- [ Info-checkbox ] end -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ checkbox ] end -->
                            <!-- [ Bootstrap-Tags-Input ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Bootstrap Tags Input</h5>
                                        <span class="d-block m-t-5">Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
                                    </div>
                                    <div class="card-block">
                                        <div class="mb-5">
                                            <h5>Markup</h5>
                                            <hr>
                                            <p>Just add <code>data-role="tagsinput"</code> to your input field to automatically change it to a tags input field.</p>
                                            <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
                                        </div>
                                        <div class="mb-5">
                                            <h5 class="mt-5">True Multi Value</h5>
                                            <hr>
                                            <p>
                                                Use a <code>&lt;select multiple /&gt;</code> as your input element for a tags input, to gain true multi value support. Instead of a comma separated string, the values will be set in an array.
                                                Existing <code>&lt;option /&gt;</code>elements will automatically be set as tags. This makes it also possible to create tags containing a comma.
                                            </p>
                                            <select multiple data-role="tagsinput">
                                                <option value="Amsterdam">Amsterdam</option>
                                                <option value="Washington">Washington</option>
                                                <option value="Sydney">Sydney</option>
                                                <option value="Beijing">Beijing</option>
                                                <option value="Cairo">Cairo</option>
                                            </select>
                                        </div>
                                        <div class="mb-5">
                                            <h5 class="mt-5">Typeahead</h5>
                                            <hr>
                                            <p>
                                                Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed <a href="http://twitter.github.io/typeahead.js/">typeahead.js</a>. An example of using
                                                this is shown below.
                                            </p>
                                            <input type="text" value="Amsterdam,Washington" class="typeahead" />
                                        </div>
                                        <div class="mb-5">
                                            <h5>Categorizing Tags</h5>
                                            <hr>
                                            <p>You can set a fixed css class for your tags, or determine dynamically by providing a custom function.</p>
                                            <input type="text" class="category-tag" />
                                        </div>
                                        <div class="mb-5">
                                            <h5>Objects As Tags</h5>
                                            <hr>
                                            <p>Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.</p>
                                            <input type="text" class="objects-tag" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Bootstrap-Tags-Input ] end -->
                            <!-- [ Bootstrap maxlength ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>bootstrap Maxlength</h5>
                                        <span class="d-block m-t-5">Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-sm-12 col-xl-4 mb-5">
                                                <h5>Default</h5>
                                                <hr>
                                                <p>The badge will show up by default when the remaining chars are <code>10</code> or <code>less</code>:</p>
                                                <input type="text" class="form-control" placeholder="Type your keywords..." maxlength="10">
                                            </div>
                                            <div class="col-sm-12 col-xl-4 mb-5">
                                                <h5>Threshold</h5>
                                                <hr>
                                                <p>Do you want the badge to show up when there are <code>20 chars</code> or less? Use the <code>threshold</code> option:</p>
                                                <input type="text" class="form-control thresold-i" placeholder="Type your keywords..." maxlength="20">
                                            </div>
                                            <div class="col-sm-12 col-xl-4 mb-5">
                                                <h5>Color-Lables</h5>
                                                <hr>
                                                <p>Just add <code>color-class</code>with <code>input</code></p>
                                                <input type="text" class="form-control color-class" placeholder="Type your keywords..." maxlength="25">
                                            </div>
                                            <div class="col-sm-12 col-xl-4 mb-5">
                                                <h5>Play With Positions</h5>
                                                <hr>
                                                <p>All you need to do is specify the <code>placement option</code>, with one of those strings. If none is specified, the positioning will be defauted to <code>'top-right'</code>.</p>
                                                <input type="text" class="form-control position-class" placeholder="Type your keywords..." maxlength="25">
                                            </div>
                                            <div class="col-sm-12 col-xl-8">
                                                <h5>Also Working With Textarea</h5>
                                                <hr>
                                                <p>Bootstrap maxlength supports textarea as well as inputs. Even on old IE.</p>
                                                <textarea class="form-control max-textarea" maxlength="255" rows="4"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Bootstrap maxlength ] end -->
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->

@section Styles{
    <!-- bootstrap-tagsinput-latest css -->
    <link rel="stylesheet" href="~/assets/plugins/bootstrap-tagsinput-latest/css/bootstrap-tagsinput.css">
}

@section Scripts{
    <!-- bootstrap-tagsinput-latest Js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script src="~/assets/plugins/bootstrap-tagsinput-latest/js/bootstrap-tagsinput.min.js"></script>

    <!-- bootstrap-maxlength Js -->
    <script src="~/assets/plugins/bootstrap-maxlength/js/bootstrap-maxlength.min.js"></script>

    <!-- form-advance custom js -->
    <script src="~/assets/js/pages/form-advance-custom.js"></script>
}

